<template>
  <div class="home">
      <div class="top">
        橙心优选
      </div>
      <div class="banner">
        <Banner />
      </div>
      <ul class="nav">
        <li class="nav-item" v-for="nav in nav_list" :key="nav.id">{{ nav.catename }}</li>
      </ul>    
  </div>
  
</template>

<script>
import Banner from "./Banner.vue"
import axios from "../utils/http"

export default {
    data(){
      return {
        nav_list: []
      }
    },
    methods: {
      get_nav(){
        axios.get("/getcate").then(
          res=>{
            this.nav_list = res.list
          }
        )
      }
    },
    created(){
      this.get_nav()
    },
    components: {
      Banner
    }
};
</script>

<style scoped>
  .top{
    background-color: #ec6239;
    width: 100%;
    height: 100px;
    font-size: 24px;
    font-weight: 700;
    color: white;
    text-align: center;
    line-height: 100px;
    letter-spacing: 10px;
  }
  .banner{
    width: 100%;
    height: 155px;
  }
  .nav{
    display: flex;
    white-space: nowrap;
    overflow: hidden;
  }
  .nav>li{
    margin: 30px;

  }
</style>
